// 这是商品分类的表格
import React, { useEffect, useState, } from 'react';
import { Table, Switch, Space, Pagination, ConfigProvider, Button, Modal, message, } from 'antd';
import { ExclamationCircleFilled } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import type { PaginationProps } from 'antd';
import zh_CN from 'antd/es/locale/zh_CN';
import './css/GoodClassify.less'
import '../../css/public.less' // 导入公共样式
import AddClassify from './child/AddClassify'
import CompileClassify from './child/CompileClassify'
import Subordinate from './child/SubordinateClassify'
import { useNavigate } from 'react-router-dom'
import { classifiedData } from '../../../api/ycl'
import { deletesecondary } from '../../../api/ycl'
import { downBox } from '../../../api/ycl'
import {api} from '../../../api/ycl'
interface DataType {
    categoryId: number; //ID
    categoryName: string; //分类
    categoryImg: string,
    categoryParent: number, //级别
    categoryNumber: number, // 商品数量
    categoryStatus: string | boolean | number, //是否上架，1为上架，其余都是未上架
    categoryRec: string | boolean | number, //推荐，1为推荐，其余都是不推荐
    categorySort: string, //排序
}
const { confirm } = Modal;
function GoodClassify() {
    const navigate = useNavigate()
    const [isModalOpen, setIsModalOpen] = useState(false); //添加
    const [isModalOpen1, setIsModalOpen1] = useState(false); //编辑
    const [isModalOpen2, setIsModalOpen2] = useState(false); //新增下级
    const [editValue, setEditValue] = useState<DataType | null>(null)
    const [data, setData] = useState<DataType | any>()
    const [type, setType] = useState<undefined | string>()
    const [messageApi, contextHolder] = message.useMessage();
    const [box, setBox] = useState<any>()  //获取到下拉框里面的内容
    const img: string = 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png' //图片的地址，现在是网上下的地址
    useEffect(() => {
        // 这里发起请求拿到后端传过来的数据
        dataApi() //调用获取所有数据的样式
        // addBox()
    }, [])
    // 获取所有数据
    const dataApi = async () => {
        try {
            let res = await classifiedData()
            if (res.code == '200') {
                setData(res.data)
                let listBox = res.data.map((item: { categoryId: any; categoryName: any; }) => {
                    return { value: item.categoryId, label: item.categoryName }
                })
                setBox(listBox)
            }
        } catch (err) {
            console.log('err', err);
        }
    }

   
    //表格表头表的类别
    const columns: ColumnsType<DataType> = [
        {
            title: '分类',
            dataIndex: 'categoryName',
            align: 'center',
        },
        {
            // 这是放的是图片，上面定义的是对象的类型
            title: '分类图标',
            dataIndex: 'categoryImg',
            align: 'center',
            render: (_, record) => {
                return (
                    <img width={50} height={50} src={api + record.categoryImg} alt="" />
                )
            }
        },
        {
            title: '级别',
            dataIndex: 'categoryParent',
            align: 'center',
            render: (_, record) => {
                return (
                    <p>{record.categoryParent === 0 ? '一级' : '二级'}</p>
                )
            }
        },
        {
            title: '商品数量',
            dataIndex: 'categoryNumber',
            align: 'center',
        },
        {
            title: '是否上架',
            dataIndex: 'categoryStatus',
            align: 'center',
            render: (value, record) => {
                return ( //这个是加一个选中或者没选中的值defaultChecked
                    <Switch
                        onChange={onChange}
                        checked={value == 1 ? true : false}
                        onClick={() => { shopId(record) }}
                    />
                )
            }
        },
        {
            title: '首页推荐',
            dataIndex: 'categoryRec',
            align: 'center',
            render: (_, record) => {
                return ( //这个是加一个选中或者没选中的值defaultChecked
                    <Switch
                        onChange={recommend}
                        defaultChecked={record.categoryRec == 1}
                        onClick={() => { homeId(record) }}
                    />

                )
            }
        },
        {
            title: '排序',
            dataIndex: 'categorySort',
            align: 'center',
        },
        {
            title: '设置',
            align: 'center',
            render: (_, record) => {
                return ( //这个是加一个选中或者没选中的值defaultChecked
                    <Space size="middle">
                        <a onClick={() => subordinate(record)}>新增下级</a>
                        <a onClick={() => ViewSubordinates(record.categoryId)}>查看下级</a>
                    </Space>
                )
            }
        },
        {
            title: '操作',
            dataIndex: 'address',
            align: 'center',
            render: (_, record) => {
                return ( //这个是加一个选中或者没选中的值defaultChecked
                    <div className='button'>
                        <button className='edit' onClick={() => compile(record)}>编辑</button>
                        <button className='del' onClick={() => showConfirm(record)}>删除</button>
                    </div>
                )
            }
        },
    ];

    const onChange = (e: boolean | number): void => { //点击上架为ture或者false
        console.log(e);
    };
    const shopId = (Items: DataType): void => { //点击上架获取到这一行的数据
        console.log(Items);
    }

    const recommend = (e: boolean | number): void => { //点击首页推荐为ture或者false
        console.log(e);
    };

    const homeId = (Items: DataType): void => { //点击首页推荐获取到这一行的数据
        console.log(Items);

    }

    // 添加
    const add = (): void => {

        setIsModalOpen(true)
    }

    // 关闭添加弹框
    const closeModal = () => {
        setIsModalOpen(false)
    }

    // 打开编辑弹框并传输数据过去
    const compile = (item: DataType) => {
        setType('one')
        setIsModalOpen1(true)
        // setEditValue(item)
        setEditValue(item)
    }
    const closeModal1 = () => {
        setIsModalOpen1(false)
    }

    // 新增下级弹框
    const subordinate = (item: DataType): void => {
        setEditValue(item)
        setIsModalOpen2(true)
    }
    const closeModal2 = () => {
        setIsModalOpen2(false)
    }

    // 查看下级
    const ViewSubordinates = (item: number) => {
        navigate('/home/goods/GoodSubordinate', { state: { item } })
    }

    // 删除
    const showConfirm = (item: DataType) => {

        confirm({
            title: '删除',
            icon: <ExclamationCircleFilled />,
            content: '确定删除这个商品分类',
            async onOk() {
                let params = { id: item.categoryId }
                try {
                    let res = await deletesecondary(params)
                    if (res.code == '200') {
                        messageApi.open({
                            type: 'success',
                            content: '删除成功',
                        });
                        dataApi()
                    }
                } catch (err) {
                    console.log('err', err);
                }
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    };

    const coss = () => {
        setIsModalOpen(false)
        setIsModalOpen1(false)
    }


    // 页码
    const page = (page: any) => {
        console.log(page);

    }


    return (
        <div className='GoodClassify'>
            {contextHolder}
            <div className='page-top'>
                <div className='page-title'>
                    <p>商品分类</p>
                </div>
            </div>

            <div className='page-contextList'>
                <div className='box'>
                    <div className='page-context'>
                        <div>
                            <ConfigProvider locale={zh_CN}>
                                <Table
                                    onChange={page}
                                    className='table-img'
                                    columns={columns}
                                    dataSource={data}
                                    scroll={{ y: 444 }} // 滚动设置成这样
                                    rowKey={item => item.categoryId}
                                    pagination={{
                                        position: ['bottomCenter'],
                                        defaultPageSize: 5,  // 如果页面只有一个表格，就默认展示10条
                                        pageSizeOptions: [3, 5, 10, 15],
                                        showQuickJumper: true,   // 快速跳转
                                        showSizeChanger: true,    // 页码改变
                                    }}
                                    title={() => <div className='title'>
                                        <p>数据列表</p>
                                        <button className='add' onClick={add}>添加</button>
                                    </div>}
                                />
                            </ConfigProvider>

                        </div>

                    </div>
                </div>

            </div>

            {/* 这是添加弹框 */}
            <AddClassify isModalOpen={isModalOpen} closeModal={closeModal} coss={coss} dataApi={dataApi} data={data}></AddClassify>
            {/* 这是编辑弹框 */}
            <CompileClassify isModalOpen1={isModalOpen1} closeModal1={closeModal1} editValue={editValue} type={type} coss={coss} dataApi={dataApi} box={box} secondar={function (): void {
                throw new Error('Function not implemented.');
            }}></CompileClassify>

            {/* 这是新增下级的弹框 */}
            <Subordinate isModalOpen2={isModalOpen2} closeModal2={closeModal2} dataApi={dataApi} box={box} editValue={editValue}></Subordinate>
        </div>

    )
}

export default GoodClassify